<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul style="background-color: mediumvioletred;">
        <li>
            1好好好
        </li>
        <li class="two">
            2好好好
            <span>456789</span>
            <span>456789</span>
        </li>
        王朝烈马
        <li>3好好好</li>
        <li>4好好好</li>
        <li>5好好好</li>
    </ul>
    <script>
        
        // .querySelector:获取符合条件的第一个元素
        let li=document.querySelector('li')
        console.log(li);
        //访问元素的父节点
        //  .parentNode  获取父节点
        let father =li.parentNode
       console.log();
       console.log(li.parentElement);
        //    修改样式
        li.parentNode.style.background="yellow"
        
        // 访问子节点
        // children  能拿到标签  推荐
        // childNodes:能拿到文本和标签  为了兼容ie678
        console.log(father.children);
        father.children[0].style.color='red'
        console.log(father.childNodes);

        // 第一节点   包含文字
        console.log(li.firstChild);
        // 第一个元素节点
         console.log(li.firstElementChild);
        

        //  兄弟元素
        // 上一个元素节点
        console.log(li.previousElementSibling);
        
        // 下一个节点包括文本
        console.log(li.nextElementSibling);
        
        
    </script>
</body>
</html>